<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>MRAID Test Page</title>
<!--
/*
 *  Copyright (c) 2012 The mraid-web-tester project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree. All contributing project authors may
 *  be found in the AUTHORS file in the root of the source tree.
 */
-->
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="safari/main.css">
	<!-- WIDGET RELATED -->
    <link rel="stylesheet" href="jquery/ui-lightness-jquery-ui.css" type="text/css" />
    <link rel="stylesheet" href="widgets/css/devicesize-widget.css" type="text/css" />
    <link rel="stylesheet" href="widgets/css/orientation-widget.css" type="text/css" />

    <!-- SUPPORTING LIBRARIES -->
    <script type="text/javascript" src="jquery/jquery.min.js"></script>
    <script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.event.drag-1.5.min.js"></script>

	<!-- PRIMARY CODE -->
    <script type="text/javascript" src="safari/mraidview.js" language="javascript"></script>
    <script type="text/javascript" src="safari/main.js" language="javascript"></script>

	<!-- WIDGET RELATED -->
    <script type="text/javascript" src="widgets/js/devicesize-widget.js" defer="defer"></script>
    <script type="text/javascript" src="widgets/js/orientation-widget.js" defer="defer"></script>

	<!-- INITIALIZATION -->
    <script type="text/javascript" defer="defer" >
    console.error = function(msg) {alert(msg)};
		$(document).ready(function(){
			$('#tabs').tabs();
			$("#accordion").accordion({ header: "h3", autoHeight:false });

			devicesizeWidget.init();
			orientationWidget.init();

			load();
		});
    </script>
</head>

<body>

<form id="setup" name="setup" onsubmit="renderAd(); return false">
<div id="tabs">
    <div id="subtitle">This project open-source -- <a href="http://groups.google.com/group/mraid-web-tester/">join the code group!</a> (and learn more about MRAID @ <a href="http://www.iab.net/mraid/">http://www.iab.net/mraid/</a>.)</div>
	<div id="logo" onclick="window.open('http://www.iab.net/mraid/')"></div>
	<div id="title">MRAID Web Tester</div>
    <ul>
        <li><a href="#tabs-1">Prepare</a></li>
        <li><a href="#tabs-2">Flight</a></li>
        <li><a href="#tabs-3">Test</a></li>
    </ul>
	<div id="tabs-1">
    	<div id="deviceDiv">
            <h2 class="no-margin">device</h2>
            <p class="name">Geometry:</p>
            <ul>
                <li><span class="name">Screen size (w x h):</span>
                    <span class="value">
                        <input id="screenWidth" name="screenWidth" class="dimension" value="320" onchange="devicesizeWidget.updatePreview()">x<input id="screenHeight" name="screenHeight" class="dimension" value="480" onchange="devicesizeWidget.updatePreview()">
                    </span>
                </li>
                <li><span class="name">Minimum ad area (w x h):</span>
                    <span class="value">
                        <input id="adWidth" name="adWidth" class="dimension" value="320" onchange="devicesizeWidget.updatePreview()">x<input id="adHeight" name="adHeight" class="dimension" value="50" onchange="devicesizeWidget.updatePreview()">
                    </span>
                </li>
                <li><span class="name">Maximum ad area (w x h):</span>
                    <span class="value">
                        <input id="adMaxWidth" name="adMaxWidth" class="dimension" value="320">x<input id="adMaxHeight" name="adMaxHeight" class="dimension" value="480" onchange="devicesizeWidget.updatePreview()">
                    </span>
                </li>
                <li><span class="name">Ad container position (top, left):</span>
                    <span class="value">
                        <input id="adLeft" name="adLeft" class="dimension" value="0" onchange="devicesizeWidget.updatePreview()">,<input id="adTop" name="adTop" class="dimension" value="0" onchange="devicesizeWidget.updatePreview()">
                    </span>
                </li>
                <li><span class="name">Maximum ad area position (top, left):</span>
                    <span class="value">
                        <input id="adMaxLeft" name="adMaxLeft" class="dimension" value="0" onchange="devicesizeWidget.updatePreview()">,<input id="adMaxTop" name="adMaxTop" class="dimension" value="0" onchange="devicesizeWidget.updatePreview()">
                    </span>
                </li>
            </ul>
            
            <div id="placmentDiv">
            	<p>Placement:</p>
                <ul>
                	<li><span class="name">Inline</span>
                    	<span class="value">
                        	<input name="placement" type="radio" value="inline" checked="checked"/>
                        </span>
                    </li>
                	<li><span class="name">Interstitial</span>
                    	<span class="value">
                        	<input name="placement" type="radio" value="interstitial"/>
                        </span>
                    </li>
                    <li><span class="name">Off-screen</span>
                    	<span class="value">
                        	<input name="offscreen" type="checkbox"/>
                        </span>
                    </li>
                </ul>
            </div>

            <div id="complianceDiv">
                <p>API version to test:</p>
                <ul>
                    <li><span class="name">MRAID v1:</span>
                        <span class="value">
                            <input name="version" value="1.0" type="radio">
                        </span>
                    </li>
                    <li><span class="name">MRAID v2:</span>
                        <span class="value">
                            <input name="version" value="2.0" type="radio" checked="">
                        </span>
                    </li>
                </ul>
            </div>

            <div id="capabilitiesDiv">
                <p>Native features to emulate:</p>
                    <ul>
                        <script type="text/javascript">
                                var items = [];
                                for (var feature in features) {
                                    items.push('<li><input id="',feature,'" name="',feature,'" type="checkbox" checked="checked" /> ',features[feature].name,'</li>');
                                }
                                document.write(items.join(''));
                            </script>
                    </ul>
            </div>
		</div>
        <div id="devicePreviewDiv">
            <div id="resizable-screensize" class="ui-widget-content" style="float:left">
                <p class="ui-widget-header">screen size</p>
                <div id="resizable-maxAdSize" class="ui-widget-content">
                    <p class="ui-widget-header">max ad area &amp; placement</p>
                    <div id="resizable-initialAdSize" class="ui-widget-content">
                        <p class="ui-widget-header">initial ad area &amp; placement</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
	<div id="tabs-2">
    	<h2 class="no-margin">source</h2>
        <div id="accordion">
			<div>
				<h3><a href="#">Test an HTML Ad</a></h3>
				<div>
                	<textarea name="adFragment" id="adFragment" rows="10">Your HTML fragment here</textarea>
                    <input type="button" value="Render" onclick="renderHtmlAd()">
                </div>
			</div>
			<div>
				<h3><a href="#">Test a URL</a></h3>
				<div>
                	<span class="name">URL:</span>
                    <span class="value">
                        <input name="adURI" id="adURI" class="uri" value="../test-ad/mraid-test-ad-two-part.html"> <!--../test-ad/resize.html*/-->
                        <input name="fragment" type="checkbox" checked="checked"> Fragment?
	                    <input type="submit" value="Render">
                    </span>
                </div>
			</div>
		</div>
    </div>
	<div id="tabs-3">
        <div id="controlsDiv">
            <h2 class="no-margin">controls</h2>
            <div id="orientationDiv" class="mraid-widget">
                <div id="orientationToggle" class="portrait"></div>
                <div id="orientationTiming" type="button" onclick="orientationWidget.toggleOrientationTiming()" class="t-off"></div>
                <p class="formValues"><span class="value">
                <select name="orientationState" id="orientationState">
                  <option value="portrait">portrait</option>
                  <option value="landscape">landscape</option>
                </select>
                </span>
                </p>
            </div>

        </div>
        <div id="consoleDiv">
            <h2 class="no-margin">console</h2>
            <em><input id="logError" type="checkbox" checked=""> Error
                <input id="logInfo" type="checkbox" checked=""> Info
                <input type="button" value="Clear" onclick="document.getElementById('console').innerHTML = ''">
            </em>
            <div class="consoleFrame"><code id="console"></code></div>
        </div>
    </div>
</div>
</form>

</body>
</html>